<template>
  <div v-if="showNumberUpdate" class="number-keyboard-view">
    <div class="number-keyboard-content-view">
      <div class="number-update-view">
        <div class="content" :style="'margin-top:' + marginTop">
          <div class="title">请输入{{ numberName }}</div>
          <div v-if="true === inputTypeIsWeight" class="weight-input-unit">
            <div class="weight-input-unit-option">
              <el-radio-group v-model="weightUnit2" @change="changeWeightUnit">
                <el-radio :label="1">按克输入</el-radio>
                <el-radio :label="3">按公斤输入</el-radio>
              </el-radio-group>
            </div>
          </div>
          <input v-model="updateNumber" class="number" maxlength="9">
          <div class="input-remind-text">上面输入框，点击可直接修改和输入</div>
          <div class="remind-text">{{ remindText }}</div>
        </div>
      </div>
      <div class="keyboard-view">
        <div class="number-view">
          <div class="number-row">
            <div class="number" @click="clickNumber('1')">1</div>
            <div class="number" @click="clickNumber('2')">2</div>
            <div class="number" @click="clickNumber('3')">3</div>
          </div>
          <div class="number-row">
            <div class="number" @click="clickNumber('4')">4</div>
            <div class="number" @click="clickNumber('5')">5</div>
            <div class="number" @click="clickNumber('6')">6</div>
          </div>
          <div class="number-row">
            <div class="number" @click="clickNumber('7')">7</div>
            <div class="number" @click="clickNumber('8')">8</div>
            <div class="number" @click="clickNumber('9')">9</div>
          </div>
          <div class="number-row">
            <div class="number number-0" @click="clickNumber('0')">0</div>
            <div v-if="true === showNumberDot" class="number dot" @click="clickNumber('.')">.</div>
          </div>
        </div>
        <div class="operate-view">
          <div class="operate-button delete" @click="deleteNumber">删除</div>
          <div class="operate-button delete" @click="cancelNumberUpdate">取消</div>
          <div class="operate-button complete" @click="complete">完成</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    number: {
      type: String,
      default: ''
    },
    marginTop: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      inputTypeIsQuantity: false,
      inputTypeIsWeight: false,
      inputTypeIsPrice: false,
      isFirstInput: true,
      showNumberDot: false,
      maxValue: 999999999,
      weightUnit: 1,
      weightUnit2: 1,
      showNumberUpdate: false,
      updateNumber: '',
      numberName: '',
      remindText: '',
      numberDotRightMaxLength: 3,
      inputTypeUnitText: '数量'
    }
  },
  methods: {
    open(value, numberName, inputType, inputTypeUnitText, maxValue) {
      if (undefined !== value) {
        this.updateNumber = value + ''
      } else {
        this.updateNumber = this.number + ''
      }
      if (maxValue !== undefined) {
        this.maxValue = maxValue
      }
      this.inputTypeIsQuantity = false
      this.inputTypeIsWeight = false
      this.inputTypeIsPrice = false
      if (inputType === 'price') {
        // 价格
        this.inputTypeIsPrice = true
        this.showNumberDot = true
        this.numberDotRightMaxLength = 2
        this.inputTypeUnitText = '价格'
      } else if (inputType === 'weight') {
        // 重量
        this.inputTypeIsWeight = true
        this.numberDotRightMaxLength = 3
        this.inputTypeUnitText = '重量'
        // 保留上次选择的重量单位类型
        if (this.weightUnit === 3) {
          this.showNumberDot = true
        } else {
          this.showNumberDot = false
        }
        if (undefined !== this.updateNumber && this.updateNumber !== '') {
          if (this.weightUnit === 3) {
            this.updateNumber = (parseFloat(this.updateNumber) / 1000).toFixed(3)
          }
          if (this.weightUnit === 3) {
            // 去除尾部的0
            if (this.updateNumber.lastIndexOf('0') === this.updateNumber.length - 1) {
              this.updateNumber = parseFloat(this.updateNumber)
            }
          }
        }
      } else {
        // 其他
        this.inputTypeIsQuantity = true
        if (inputTypeUnitText !== undefined) {
          this.inputTypeUnitText = inputTypeUnitText
        } else {
          this.inputTypeUnitText = '数量'
        }
        this.showNumberDot = false
      }
      if (undefined !== numberName) {
        if (inputType === 'price') {
          this.numberName = numberName
        } else {
          this.numberName = numberName + this.inputTypeUnitText
        }
      }
      this.clearRemindText()
      this.isFirstInput = true
      this.showNumberUpdate = true
    },
    changeWeightUnit(weightUnit) {
      weightUnit = parseInt(weightUnit)
      this.clearRemindText()
      if (undefined !== this.updateNumber && this.updateNumber !== '') {
        if (this.weightUnit === 1 && weightUnit === 3) {
          // 原本是克，改为公斤
          this.updateNumber = parseFloat((parseFloat(this.updateNumber) / 1000).toFixed(3)) + ''
        } else if (this.weightUnit === 3 && weightUnit === 1) {
          // 原本是公斤，改为克
          this.updateNumber = (parseFloat(this.updateNumber) * 1000).toFixed(0)
        }
      }
      this.weightUnit = weightUnit
      this.showNumberDot = weightUnit !== 1
    },
    clickNumber(value) {
      this.clearRemindText()
      if (this.isFirstInput === true) {
        // 首次输入
        this.isFirstInput = false
        if (this.showNumberDot === true) {
          // 有小数点
          if (value === '.') {
            // 小数点只能有一位
            this.updateNumber = '0.'
          } else {
            this.updateNumber = value
          }
        } else {
          this.updateNumber = value
        }
        return
      }
      if (this.showNumberDot === true) {
        // 有小数点
        if (value === '.') {
          // 小数点只能有一位
          if (('' + this.updateNumber).indexOf('.') > -1) {
            return
          }
          if (this.updateNumber.length === 0) {
            this.updateNumber = '0.'
            return
          }
        } else {
          // 小数位不能超过3位
          if (('' + this.updateNumber).indexOf('.') > -1) {
            // 有小数点才判断
            const tempArray = ('' + this.updateNumber).split('.')
            if (tempArray[1].length >= this.numberDotRightMaxLength) {
              this.showRemindText('最多支持' + this.numberDotRightMaxLength + '位小数')
              return
            }
          }
        }
      }
      if (value === '0') {
        if (('' + this.updateNumber) === '0') {
          return
        }
      } else {
        if (value !== '.') {
          // 输入不为0的数字时，前面如果为0则去掉0
          if (this.updateNumber === '0') {
            this.updateNumber = ''
          }
        }
      }
      const maxLength = this.showNumberDot === true ? 8 : 7
      if (('' + this.updateNumber).length > maxLength) {
        this.showRemindText('已达最大位数')
        return
      }
      if (this.updateNumber > this.maxValue) {
        this.showRemindText('最大不能超过' + this.maxValue)
        return
      }
      if (this.showNumberDot === true) {
        this.updateNumber = this.updateNumber + '' + value
      } else {
        this.updateNumber = parseInt(this.updateNumber + '' + value) + ''
      }
    },
    deleteNumber() {
      this.clearRemindText()
      if (this.isFirstInput === true) {
        this.isFirstInput = false
      }
      this.updateNumber = ('' + this.updateNumber).substring(0, ('' + this.updateNumber).length - 1)
    },
    complete() {
      this.clearRemindText()
      try {
        if (this.updateNumber === '') {
          this.showRemindText('请输入' + this.inputTypeUnitText)
          return
        }
        if (this.updateNumber > this.maxValue) {
          this.showRemindText('最大不能超过' + this.maxValue)
          return
        }
        if (this.inputTypeIsWeight === true && this.showNumberDot === true) {
          if (parseFloat(this.updateNumber) >= 100000) {
            this.showRemindText('重量数值最大不能超过10万')
            return
          }
        } else {
          if (this.inputTypeIsPrice === true) {
            if (parseFloat(this.updateNumber) >= 1000000) {
              this.showRemindText('数值最大不能超过1百万')
              return
            }
          } else {
            if (('' + this.updateNumber).length > 8) {
              this.showRemindText('数值最大不能超过1亿')
              return
            }
          }
        }
      } catch (e) {
        this.showRemindText('请输入正确的' + this.inputTypeUnitText)
        return
      }
      let resultNumber
      if (this.inputTypeIsWeight === true && this.weightUnit === 3) {
        resultNumber = parseInt(this.updateNumber * 1000)
      } else {
        if (this.inputTypeIsPrice === true) {
          resultNumber = parseFloat(this.updateNumber)
        } else {
          resultNumber = parseInt(this.updateNumber)
        }
      }
      if (resultNumber < 0) {
        this.showRemindText('请输入' + this.inputTypeUnitText)
        return
      }
      this.$emit('confirm', () => {
        this.showNumberUpdate = false
      }, resultNumber)
    },
    cancelNumberUpdate() {
      this.showNumberUpdate = false
    },
    showRemindText(remindText) {
      this.remindText = remindText
    },
    clearRemindText() {
      this.remindText = ''
    }
  }
}
</script>

<style lang="scss">
.number-keyboard-view {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .number-keyboard-content-view {
    width: 300px;
    height: 400px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
  }
}

.number-update-view {
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    height: auto;
    margin: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    border-radius: 20px;

    .title {
      height: 30px;
      font-size: 17px;
      margin-bottom: 10px;
    }

    .number {
      width: 260px;
      align-self: stretch;
      height: 40px;
      text-align: center;
      border: 1px #acacac solid;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #000;
      background-color: #fafafa;
      margin: 0 15px;
    }

    .input-remind-text {
      font-size: 12px;
      color: #ccc;
      margin-top: 5px;
    }

    .remind-text {
      font-size: 14px;
      color: #f00;
      height: 35px;
      margin-top: 5px;
    }

  }

}

.keyboard-view {
  align-self: stretch;
  display: flex;
  height: 200px;

  .number-view {
    flex: 3;
    width: 0;
    display: flex;
    flex-direction: column;

    .number-row {
      flex: 1;
      display: flex;

      .number {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px #f5f5f5 solid;
        border-bottom: 1px #f5f5f5 solid;
        background-color: #fafafa;
        color: #000;
        font-size: 16px;
        cursor: pointer;

        &:active {
          background-color: #eee;
        }
      }

      .number-0 {
        flex: 2;
      }
    }
  }

  .operate-view {
    flex: 1;
    width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;

    .operate-button {
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .delete {
      flex: 1;
      background-color: #eee;
      color: #000;
      font-size: 16px;
      border-bottom: 1px #f5f5f5 solid;

      &:active {
        background-color: #ddd;
      }
    }

    .complete {
      flex: 2;
      background-color: #F07505;
      color: #fff;
      font-size: 16px;

      &:active {
        background-color: #905505;
      }
    }
  }
}

.weight-input-unit {
  display: flex;
  flex-direction: row;
  height: 30px;
  align-items: center;

  .weight-input-unit-option {
    display: flex;
    flex-direction: row;
    font-size: 13px;
    align-items: center;
    margin-left: 15px;

    &:first-child {
      margin-left: 0;
    }

    .weight-input-unit-check {
      margin-right: 10px;
      width: 33px;
      height: 33px;
    }
  }
}
</style>
